<template>
  <router-link class="img-item" tag="li" :to="`${path}/${song.id}`">


    <a >
      <div
        class="item mb-line-b"
        data-id="35748"
        data-bid="dp_wx_home_cinema_list"
      >
        <div class="title-block box-flex middle">
          <div class="title line-ellipsis">
            <span>{{song.info.name}}</span>
            <span class="price-block">
              <span class="price">{{song.info.price}}元</span><span class="q">起</span>
            </span>
          </div>
          <div class="location-block box-flex">
            <div class="flex line-ellipsis">{{song.info.address}}</div>
            <div class="distance">{{song.distance}}</div>
          </div>
    
          <div v-if="song.info&&song.info.tags" class="label-block">
            <div v-if="song.info&&song.info.tags.length>=0" class="allowRefund">退</div>
            <div v-if="song.info&&song.info.tags.length>=1" class="endorse">改签</div>
            <div v-if="song.info&&song.info.tags.length>=2" class="vipTag">折扣卡</div>
             <div v-if="song.info&&song.info.tags.length>=3" class="hallType">杜比全景声厅</div> 
              <div v-if="song.info&&song.info.tags.length>=4" class="hualuo">官方推荐</div> 
             
          </div>
          <div class="discount-block">
            <div>
              <div class="discount-label normal card">
                <img
                  src="//p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png"
                />
              </div>
              <div class="discount-label-text">开卡特惠，10.9元起开卡</div>
            </div>
          </div>
        </div>
      </div>
    </a>

  </router-link>
</template>
<script>
export default {
  props: {
    song: {
      type: Object,
      default: function () {
        return {};
      },
    },
    path: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      arr: null,
    };
  },
};
</script>
<style lang="less" scoped>
.img-item {
   background-color: #f8f9f9;
overflow: hidden;
  padding: 0 18px 0 18px;

}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.van-loading {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
a {
  text-decoration: none;
}

.item {
  margin: 10px;
  height: 80px;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  .title-block {
    display: block;
    .title {
      color: #111;
      line-height: 25px;
      height: 25px;
      font-size: 16px;
      color: #000;
    }
    .price-block {
      float: right;
      color: #f03d37;
      line-height: 1.5;
      .price {
        font-size: 16px;
      }
      .q {
        color:#111;
        font-size: 14px;
        margin-left: 3px;
      }
    }
    .flex {
      flex: 1;
    }
    .location-block {
      margin-top: 6px;
      font-size: 13px;
     color: grey;
      display: flex;
      .flex {
        flex: 1;
      }
      .distance {
        margin-left: 5px;
      }
    }
    .label-block {
      height: 17px;
      line-height: 17px;
      margin-top: 4px;
      margin-bottom: 4px;
      overflow: hidden;
      font-size: 0;
      flex-shrink: 0;
      > div {
        position: relative;
        display: inline-block;
        padding: 0 3px;
        height: 15px;
        line-height: 15px;
        border-radius: 2px;
        font-size: 0.6rem;
        + div {
          margin-left: 5px;
        }
      }
      .allowRefund,
      .endorse,
      .hallType {
        color: #589daf;
        border: 1px solid #589daf;
      }
      .snack,
      .hualuo,
      .vipTag {
        color: #f90;
        border: 1px solid #f90;
      }
    }
    .discount-block {
      color: #999;
      margin-bottom: 4px;
      .discount-label {
        display: inline-flex;
        width: 15px;
        height: 14px;
        position: relative;
        top: 3px;
        img {
          width: 100%;
        }
      }
      .discount-label-text {
        margin-left: 0;
        font-size: 11px;
        display: inline-block;
      }
    }
  }
}
</style>